<template>
  <div class="visitor-route-wrapper">
    <MapboxMap
      :map-id="mapId"
      @after-map-loaded="afterMapLoaded"
      @before-map-destroyed="beforeMapDestroyed"
    />
    <VisitorList />
    <RouteDetail
      v-show="showRouteDetail"
      :current="choosePointId"
      @close="handleCloseRouteDetail"
    />
  </div>
</template>
<script setup>
import { ref, createApp } from 'vue'
import VisitorList from './components/visitorList.vue'
import VisitorDetail from './components/vistorDetail.vue'
import RouteDetail from './components/routeDetail.vue'
import mapboxgl, { LngLat } from 'mapbox-gl'
import MapboxMap from '@/components/mapbox-map.vue'
import { nanoid } from 'nanoid'
const mapId = nanoid()

let _map
let _marker
let _popup

let markers = []
let popupInstance = null

import icon from '../../../../assets/imgs/map-location.png'
import icon1 from '../../../../assets/imgs/map-location-select.png'
const locationNormal = new Image()
locationNormal.src = icon
locationNormal.width = 30
locationNormal.height = 34
const locationSelect = new Image()
locationSelect.src = icon1
locationSelect.width = 30
locationSelect.height = 34

const showRouteDetail = ref(false)
const choosePointId = ref('')

const afterMapLoaded = async (id, map) => {
  _map = map
  _map.addImage('locationNormal', locationNormal)
  _map.addImage('locationSelect', locationSelect)

  resizeMap()
  addUserPoint()

  _map.on('click', 'point-layer', (params) => {
    // 高亮图标
    showRouteDetail.value = true
    choosePointId.value = params.features[0].properties.id
    hightlightUserPoint(choosePointId.value)
    // addPopup(params.lngLat)
  })
}

const beforeMapDestroyed = (id, map) => {}

const resizeMap = () => {
  setTimeout(() => {
    _map?.resize()
  })
}
const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: '1',
        userName: '罗显文',
      },
      geometry: {
        type: 'Point',
        coordinates: [106.49435, 29.767579],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: '2',
        userName: '徐雅丽',
      },
      geometry: {
        type: 'Point',
        coordinates: [106.491142, 29.773582],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: '3',
        userName: '江冰川',
      },
      geometry: {
        type: 'Point',
        coordinates: [106.484749, 29.772612],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: '4',
        userName: '粟思嘉',
      },
      geometry: {
        type: 'Point',
        coordinates: [106.47432, 29.767579],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: '5',
        userName: '田锐',
      },
      geometry: {
        type: 'Point',
        coordinates: [106.470165, 29.730274],
      },
    },
  ],
}
const lineGeojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [106.49435, 29.767579],
          [106.491142, 29.773582],
          [106.484749, 29.772612],
          [106.47432, 29.767579],
          [106.470165, 29.730274],
        ],
      },
    },
  ],
}

const addUserPoint = () => {
  _map.addSource('point-source', {
    type: 'geojson',
    data: geojson,
  })
  _map.addSource('line-source', {
    type: 'geojson',
    data: lineGeojson,
  })
  _map.addLayer({
    id: 'line-layer',
    type: 'line',
    source: 'line-source',
    paint: {
      'line-width': 3,
      // 'line-opacity': 0.5,
      'line-color': '#1989FA',
    },
    metadata: {
      zIndex: 1,
    },
  })
  _map.addLayer(
    {
      id: 'point-layer',
      type: 'symbol',
      source: 'point-source',
      layout: {
        'icon-image': 'locationNormal',
        'icon-size': 1,
        'icon-offset': [0, -10],
        // 'text-field': ['get', 'userName'],
        // 'text-offset': [0, -3],
        // 'text-anchor': 'top',
      },
      paint: {
        'text-color': '#4576ee',
      },
      metadata: {
        zIndex: 10,
      },
    },
    'line-layer',
  )
}

// 设置图层高亮
const hightlightUserPoint = (choosePointId) => {
  _map.setLayoutProperty('point-layer', 'icon-image', [
    'case',
    ['==', ['get', 'id'], choosePointId],
    'locationSelect',
    'locationNormal',
  ])
}
// 添加弹窗
const addPopup = (coordinates) => {
  if (popupInstance) {
    popupInstance.remove()
  }
  const template = createApp(VisitorDetail, {})
  const div = document.createElement('div')
  template.mount(div)
  popupInstance = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false,
    offset: [0, -30],
  })
    .setLngLat(coordinates)
    .setDOMContent(div)
    .addTo(_map)
}

const handleCloseRouteDetail = () => {
  showRouteDetail.value = false
  choosePointId.value = ''
  hightlightUserPoint('')
}
</script>
<style lang="scss" scoped>
.visitor-route-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .mapbox-map {
    width: 100%;
    height: 100%;
  }
}
</style>
